<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <style>
    .block {
      width: 200px;
      height: 200px;
      background-color: antiquewhite;
    }
  </style>
</head>
<body>
  <input type="text" id="email" name="name"/>
  <div id="wrapper">
    <div class="block"></div>
  </div>
  <script>
    // 添加实例方法
    $.fn.extend({
      alertValue: function() {
        console.log(this) // JQuery对象
        console.log($(this)) // new JQuery对象
        console.log($(this) === this)
        $(this).click(function() {
          alert(this.val());
        });
      }
    });
    console.log($('body').find('#email')) // jQuery 对象

    $("#email").alertValue(); // 点击元素时，弹出其值
    $('#wrapper').on('mouseover', function() {
      $('.block').slideUp(5000)
    })
  </script>
</body>
</html>